<template>
  <el-dialog  :title="'批次详情'" v-model="dialog.openCheck"  width="90%"  @opened="openDialog"   append-to-body @close="closeTxDialog">
    <div>
      <el-card>
        <template #header>
              <div class="card-header" style="font-weight: 700;">
                <span>{{item.no +'批次详情'}}</span>
              </div>
         </template>
        <el-row>
          <el-col :span="8" style="padding: 8px;">
              <span>创建时间：</span>{{item.addTime}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>企业名称：</span>{{item.merName}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>企业编号：</span>{{item.merNo}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>服务商名称：</span>{{item.sydName}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>服务商编号：</span>{{item.sydNo}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>项目名称：</span>{{item.taskName}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>项目编号：</span>{{item.taskNo}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>总金额(元)：</span>{{proxy?.convertFenToYuan(item.amountEnt)}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>服务费(元)：</span>{{proxy?.convertFenToYuan(item.serviceChargeAmount)}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>实际打款金额(元)：</span>{{proxy?.convertFenToYuan(item.money)}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>批次费率：</span>{{item.serviceChargeRate+'%'}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>业务类型：</span>{{proxy?.getDicValue(item.busType,wxfe_bus_type)}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>开票类型：</span>{{proxy?.getDicValue(item.invoiceType,invoice_type)}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>产品编号：</span>{{item.proNo}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>计费模式：</span>{{proxy?.getDicValue(item.chargeMode,charge_mode)}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>服务费承担方：</span>{{proxy?.getDicValue(item.serviceChargeType,service_charge_type)}}
          </el-col>
          <el-col :span="8" style="padding: 8px;">
              <span>批次状态：</span>{{proxy?.getDicValue(item.status,bill_status)}}
          </el-col>
        </el-row>
      </el-card>

      <el-card  style="margin-top:5px;">
        <template #header>
              <div class="card-header" style="font-weight: 700;">
                <span>批次子明细</span>
              </div>
         </template>
       <el-table ref="roleTableRef" v-loading="loading" border :data="operList">
        <el-table-column label="创建时间" align="center" sortable prop="addTime" width="160" />
        <el-table-column label="企业名称" align="center" width="190"  prop="merName" >
          <!-- <template #default="scope">
            <el-tooltip :content="scope.row.no" raw-content placement="bottom" effect="light">
                <div line-clamp="1" truncated>
                  {{ scope.row.no }}
                </div>
            </el-tooltip>
          </template>-->
        </el-table-column>
        <el-table-column label="服务商名称" align="center" width="180" prop="sydName"  >
          <!-- <template #default="scope">
            <el-tooltip :content="scope.row.billNos" raw-content placement="bottom" effect="light">
                <div line-clamp="1" truncated>
                  {{ scope.row.billNos }}
                </div>
            </el-tooltip>
          </template> -->
        </el-table-column>
        <el-table-column label="结算账户" prop="bankCard" align="center" width="150">
        </el-table-column>
        <el-table-column label="打款金额(元)" align="center" prop="amount" width="110" >
            <template #default="scope">
               <span>{{ convertFenToYuan(scope.row.amount) }}</span>
            </template>
        </el-table-column>

        <el-table-column label="收款人" align="center" prop="workerName" width="100" />
        <el-table-column label="收款人身份证号" align="center" prop="cardId" width="140" />
        <el-table-column label="收款人手机号" align="center" prop="workerPhone" width="140">
        </el-table-column>
        <el-table-column label="批次号" align="center" prop="billNo" show-overflow-tooltip width="180" />
        <el-table-column label="交易流水号" align="center" prop="busNo" show-overflow-tooltip width="240" />
        <el-table-column label="支付通道" align="center" prop="passage" width="120">
        </el-table-column>

        <el-table-column label="打款状态" align="center" prop="payStatus" width="140" >
          <template #default="scope">
            <dict-tag :options="pay_status" :value="scope.row.payStatus" />
          </template>
        </el-table-column>
        <el-table-column label="支付时间" align="center" prop="payTime" width="140" />
        <el-table-column label="银行附言" align="center" prop="billRemark" width="140" />
        <el-table-column label="备注" align="center" prop="payRemark" width="140" />
       </el-table>
       <div class="demo-pagination-block mt-[10px]">
         <el-pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
         />
       </div>
      </el-card>

      <!--
      <el-card style="margin-top:5px;">
        <template #header>
              <div class="card-header" style="font-weight: 700;">
                <span>操作日志</span>
              </div>
         </template>
        <el-table ref="logTableRef"  border :data="logList">
          <el-table-column label="操作时间" align="center" sortable prop="addTime"  />
          <el-table-column label="操作角色" align="center"   prop="createRoleName" />
          <el-table-column label="操作内容" align="center"  prop="logDesc" />
          </el-table>
      </el-card>
      -->
      <el-card style="margin-top:5px;">
          <template #header>
                <div class="card-header" style="font-weight: 700;">
                  <span>{{checkTitle}}</span>
                </div>
           </template>
          <el-form :model="mdyForm"  :rules="mdyRules"  ref="dialogRef" label-width="120px" label-suffix=":">
            <el-form-item label="审核是否通过" prop="checkType">
              <el-radio-group v-model="mdyForm.checkType" class="ml-4">
                    <el-radio label="3" >通过</el-radio>
                    <el-radio label="2" >拒绝</el-radio>
                  </el-radio-group>
            </el-form-item>
            <el-form-item label="审核意见" prop="remarer">
              <el-input v-model="mdyForm.remarer" type="textarea"  :rows="6" />
            </el-form-item>
          </el-form>
      </el-card>

    </div>
    <template #footer>
          <div class="dialog-footer">
            <el-button @click="closeTxDialog">取 消</el-button>
            <el-button type="primary" :loading="mdyLoading" @click="mdySubmit">确 定</el-button>
          </div>
        </template>

    </el-dialog>
</template>

<script  setup name="billSerCheckDetail" lang="ts">
  import {billDetail,billSubDetail} from "@/api/settle/paybatch";
  const pros = defineProps(['title','openCheck','id','txItem']);
  const emit = defineEmits(['dialogClose', 'dialogSubmit','flushDetail'])

  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const { pay_status } = toRefs<any>(proxy?.useDict('pay_status'));
  const { invoice_status } = toRefs<any>(proxy?.useDict('invoice_status'));
  const { bill_status } = toRefs<any>(proxy?.useDict('bill_status'));
  const { pay_channel } = toRefs<any>(proxy?.useDict('pay_channel'));
  const { invoice_type } = toRefs<any>(proxy?.useDict('invoice_type'));
  const { wxfe_bus_type} = toRefs<any>(proxy?.useDict('wxfe_bus_type'));
  const {charge_mode} = toRefs<any>(proxy?.useDict('charge_mode'));
  const {settlement_style} = toRefs<any>(proxy?.useDict('settlement_style'));
  const {service_charge_type} = toRefs<any>(proxy?.useDict('service_charge_type'));
  const checkTitle = ref('接单审核')
  const mdyForm = ref({
     checkType:"3",
     file:'',
     remarer:"",

  });

 const bohuiValidate = (rule: any, value: string, callback: any)=>{
      if(mdyForm.value.checkType == "2" && !value){
            callback(new Error("驳回请输入审核意见"));
      } else {
        callback();
      }
 }
 const mdyLoading = ref(false)

 const setCheckTitle = (title:string)=>{
   checkTitle.value = title;
 }

 const mdyRules = ref({
    checkType: [{ required: true, message: "请选择审核操作", trigger: "blur" }],
    remarer: [{ validator: bohuiValidate, trigger: "blur" }],
});

  const dialog = ref({
     title:'',
     openCheck:false
  })

  const loading = ref(false)
  const item = ref({});
  const dialogRef  = ref();
  const queryParams = ref({
    pageSize:10,
    pageNum:1

  });
  const total = ref(0);
  const operList = ref([]);
  const logList = ref([]);
  const logTableRef = ref();

  item.value = pros.txItem;

  const openDialog = ()=>{
    billDetail(pros.txItem.id).then(res => {
      item.value = res.data
      logList.value = res.data.logs;
    });
    getList();

  }


const setCheckValue = ()=>{
    mdyForm.value.remarer = "";
    mdyForm.value.checkType = '3';
    mdyLoading.value = false;
    closeTxDialog();

}

  const getList = ()=>{
    billSubDetail({
      billNo:pros.txItem.no
    }).then(res => {
      operList.value = res.rows
      total.value = res.total
      loading.value = false
    })
  }

  const getPayStatusStr = (payStatus)=>{

    let len = pay_status.value.length;
    for(let i = 0; i< len ; i++){
        if(payStatus ==  pay_status.value[i].value){
          return pay_status.value[i].label;
        }
    }
  }

  const closeTxDialog =()=>{
      mdyLoading.value = false;
      dialog.value.openCheck = false;
      emit('dialogClose',{tag:1});

 }


 const mdySubmit = ()=>{
    dialogRef.value?.validate(async (valid: boolean) => {
      if (valid) {
         mdyLoading.value = true;
          emit('dialogSubmit', {
            id:item.value.id,
            sydVerifyStatus:mdyForm.value.checkType,
            sydVerifyReason:mdyForm.value.remarer
          })
      }})
  }

  const setHideLoading =(status:any)=>{
     mdyLoading.value =status;
  }


  watch(() => pros.openCheck, async val => {
         dialog.value.openCheck =  val;
    });


  watch(() => pros.txItem, async val => {
      item.value = pros.txItem;
    });

  defineExpose({setCheckValue,setCheckTitle,setHideLoading})
</script>

<style>

  .el-dialog__header{
    border-bottom: 1px solid #e8e8e8;
    padding-bottom:15px;
    margin-right:0;
  }

  .el-dialog__footer{
     border-top: 1px solid #e8e8e8;
  }


  .tx-tips{
      background: #f5f5f5;
      padding: 15px;
      display: flex;
      justify-self: flex-start;
      align-items: center;
  }

  .tx-tips img{
    width: 30px;
    height:30px;
  }

  .content{
        border: 1px solid #1890ff;
        margin-top: 30px;
  }

  .content-title{
        border-bottom: 1px solid #1890ff;
        padding: 15px 0;
        text-align: center;
        font-size: 20px;
        font-weight: 700;
  }


  .el-row:after, .el-row:before {
      display: table;
      content: "";
  }

</style>
